<template>
  <div class="city">
    <cityhead></cityhead>
    <citysearch :cities="cities"></citysearch>
    <cityfixed :cities="cities" :hotCities="hotCities" :alpindex="alpindex"></cityfixed>
    <city-alp :cities="cities" @passalpindex="passalpindexHandler"></city-alp>
  </div>
</template>

<script>
import axios from "axios"
import cityhead from '@/components/cityhead.vue'
import citysearch from '@/components/citysearch.vue'
import cityfixed from '@/components/cityfixed.vue'
import cityAlp from '@/components/cityAlp.vue'
export default {
  name: 'city',
  components:{
    cityhead,
    citysearch,
    cityfixed,
    cityAlp,
    },
  data () {
    return {
     cities:{},
     hotCities:{},
     alpindex:'',
    }
  },
  methods:{
    fengcity(){
      axios.get('/static/city.json').then((res)=>{
        var data = res.data.data;
        this.cities = data.cities;
        this.hotCities = data.hotCities;
        // console.log(data)
      });
    },
    passalpindexHandler:function(index){
				//把字母表组件传过来的index 赋值给自身变量
				this.alpindex=index;
			},
  },
  
  created(){
    this.fengcity()
  }
}
</script>

<style scoped>

</style>
